<template>
    <el-container>
        <el-header class="header">
            <el-row :gutter="20">
                <el-col :span="4">
                    权限管理系统
                </el-col>
                <el-col :span="3" :offset="17">
                    <el-button icon="el-icon-edit" circle></el-button>
                    <el-button icon="el-icon-check" circle></el-button>
                    <el-button icon="el-icon-message" circle @click="logout"></el-button>
                </el-col>
            </el-row>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu active-text-color="#ff0000" :unique-opened="true" :default-openeds="['2']" default-active="1"
                    :router="true" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                    <el-submenu :index="menu.menuId.toString()"
                        v-for="(menu, index) in menuData.filter(m=>m.menuType==1)" :key="index">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>{{menu.menuName}}</span>
                        </template>
                        <el-menu-item :index="submenu.menuRoute"
                            v-for="(submenu, index) in menuData.filter(m=>m.parentId==menu.menuId)" :key="index">
                            {{submenu.menuName}}
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view />
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    import Vue from 'vue'
    import { GetMenu } from '../api/menu';
    import { resetRouter } from '@/router';
    export default {
        name: 'RbacProjectUiHome',

        data() {
            return {
                menuData: []
            };
        },

        async mounted() {
            let { data } = await GetMenu();
            this.menuData = data;
            console.log(this.menuData.filter(m => m.menuType == 1));
        },

        methods: {
            handleOpen(key, keyPath) {
            },
            handleClose(key, keyPath) {
            },
            logout() {
                //清空Token
                Vue.ls.remove('jwt');
                //重置路由
                resetRouter();
                //重定向到登录页面
                this.$router.push('/login')
                //window.location.href = '/';
            }
        },
    };
</script>

<style>
    .el-header {
        background-color: #1671ae;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-header .el-col-4 {
        font-size: 19px;
        color: #fff;
        font-weight: bold;
        text-align: left;
    }

    .el-aside {
        background-color: #fff;
        color: #333;
        text-align: left;
        border-right: 1px solid #ccc;
    }

    .el-main {
        background-color: #fff;
        color: #333;
        height: calc(95vh);
    }

    .el-menu {
        border: none;
    }

    body>.el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>